import React, {Component} from 'react'
import PropTypes from 'prop-types'
class TodoItem extends Component {
  // ({onToggle, onRemove, completed, text}) =>
  constructor (props) {
    super(props)
  }
  // 当使用了react-redux库，就不需要声明这个了。但是react-redux使用的是浅比较，即===。总是认为两个对象是不同的，所以就会增加很多次无意义的渲染。为了避免这个情况，不直接传入对象，而是传入一个对象的引用(把对象赋值给一个变量，然后传入这个变量)
  shouldComponentUpdate (nextProps, nextState) {
    return (nextProps.completed !== this.props.completed) ||
    (nextProps.text !== this.props.text)
  }
  render () {
    const {onToggle, onRemove, completed, text} = this.props
    const checkedProp = completed ? {checked: true} : {}
    return (
      <li
        className="todo-item"
        style={{
          textDecoration: completed ? 'line-through' : 'none'
        }}
      >
        <input
          className="toggle"
          type="checkbox"
          {...checkedProp}
          readOnly
          onClick={onToggle}
        />

        <label className="text">{text}</label>
        <button
          className="remove"
          onClick={onRemove}>x</button>
      </li>
    )
  }
}
TodoItem.propTypes = {
  onToggle: PropTypes.func.isRequired,
  onRemove: PropTypes.func.isRequired,
  completed: PropTypes.bool.isRequired,
  text: PropTypes.string.isRequired
}
export default TodoItem